<template>  
<div class="find-page">
    <!-- 标题 -->
   <van-nav-bar
  title="发现"
/>
<!-- 内容 -->
<div class="contentBox">
  <van-nav-bar
  left-text="面试技巧"
  right-arrow
  @click-right="onClickRight"
>
 <template #right>
     查看更多
    <van-icon name="arrow" size="18" color="#9b9d9f"/>
  </template>
</van-nav-bar>
    <div class="content">
        <div class="contentLeft">
            <p class="p-title">面试技巧是沙发沙发发发发发发发发发发发发</p>
           <p class="p-state"> <span>1年前</span>
            <span><i ><van-icon name="eye-o"  size="18" /></i>17</span>
            <span><i><van-icon name="good-job-o"  size="18" /></i>1</span></p>
        </div>
        <div class="contentRight">
            <img src="../../assets/logo.png" alt="">
        </div>
    </div>
</div>
</div>
</template>

<script>

export default {
    name:'find',
    data(){
        return {}
    },
     methods:{
         onClickRight(){
             console.log("查看更多");
         }
     }
    
}
</script>

<style lang="less">
.find-page{
.van-nav-bar__title.van-ellipsis {
    font-size: 20px;
    font-weight: 700;
}
.head{
    border-top: 3px solid #f7f4f5;
}
span.van-nav-bar__text {
    color: #000;
    font-size: 20px;
    font-weight: 700;
}
.van-nav-bar__right {
    color: #9b9d9f;
}
.content{
    padding: 0 15px;
    display: flex;
   .contentLeft{
       flex: 2;
       .p-title{
        font-size: 18px;
        font-weight: 700;
       }
       .p-state{
           color: #ccccd3;
           font-size: 16px;
           text-align: right;
           span:nth-child(3){
               margin-left: 15px;
           }
           span:nth-child(2){
               margin-left: 110px;
               
            
           }
       }
   }
   .contentRight{
       flex: 1;
       width: 113px;
       height: 75px;
       img{
           width: 100%;
       }
   }
}

}

</style>